<template>
  <div class="back">
    <div :class="bodyTitle">
      <div class="body-header">{{ title }}</div>
      <div class="body-header-time">{{ time }}</div>
      <div class="body-main">
        <div class="body-main-form">
          <div class="row" style="height: 50%">
            <el-input
              type="textarea"
              v-model="content"
              rows="10"
              readonly
            />
          </div>
          <div class="row" style="height: 50%">
            <div>附件：(请用浏览器打开链接下载附件)</div>
            <span
              class="file"
              v-for="item in fileList"
              :key="item.pkid"
              @click="downloadFile(item)"
              >{{ item.sourceName }}</span
            >
          </div>
        </div>
      </div>
      <div class="body-foot">
        <div class="body-foot-button" @click="read">
          已阅
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="个人信息"
      @close="onClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="75vw"
    >
      <!-- :append-to-body="true" -->
      <el-form
        label-width="80px"
        :model="form"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="用户姓名" prop="userName">
          <!--          @blur="nameCheck"-->
          <el-input v-model="form.userName" clearable />
          <!-- style="-webkit-user-select: auto;" -->
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <!--          @blur="getCompany"-->
          <el-input v-model="form.phone" clearable />
          <!-- style="-webkit-user-select: auto;" -->
        </el-form-item>
        <!--        <el-form-item label="业主单位" prop="company">-->
        <!--          <el-select-->
        <!--            v-model="form.company"-->
        <!--            filterable-->
        <!--            clearable-->
        <!--            style="width: 100%"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="(item, index) in selectOne"-->
        <!--              :key="index"-->
        <!--              :label="item.company"-->
        <!--              :value="item.company"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--          &lt;!&ndash; <el-input v-model="form.company" clearable /> &ndash;&gt;-->
        <!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <el-button @click="onClose">取消</el-button>
        <el-button
          type="primary"
          @click="onSumbit('ruleForm')"
          >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  noticeQueryOne,
  noticeFileDownload,
  noticeUserRead,
  noticeUserCheck,
  noticeUserQuery
} from '@/api/wisdomBuild'

export default {
  name: 'detail',
  data() {
    return {
      formArrTextarea: [],
      selectOne: [],
      selectOneValue: '',
      selectTwo: [],
      selectTwoValue: '',
      taskPkid: '',
      manageNumber: '',
      workNumber: '',
      vaccinOneNumber: '',
      title: '',
      content: '',
      bodyTitle: '',
      fileList: [],
      form: {
        noticeId: '',
        phone: '',
        userName: ''
        // company: ''
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }
        ]
        // company: [
        //   {
        //     required: true,
        //     message: '请选择业主单位',
        //     trigger: 'change'
        //   }
        // ]
      },
      dialogVisible: false,
      time: '',
      userParameter: {
        userName: '',
        company: '',
        phone: '',
        pageIndex: 1,
        pageSize: 9999
      }
    }
  },
  watch: {},
  computed: {
    allNumber() {
      return this.workNumber * 1 + this.manageNumber * 1
    },
    noVaccinNumber() {
      return this.allNumber * 1 - this.vaccinOneNumber * 1
    }
  },
  mounted() {
    const windowWidth = document.body.offsetWidth
    console.log(windowWidth, 'width')
    if (windowWidth >= 1024) {
      this.bodyTitle = 'bodyPC'
    } else {
      this.bodyTitle = 'body'
    }
    this.formArrTextarea = []
    this.taskPkid = this.$route.query.pkid
    this.form.noticeId = this.$route.query.pkid
    this.getInfo()
    // this.getUserList()
    // getSelect().then((res) => {
    //   if (res.success) {
    //     this.selectOne = res.data
    //   }
    // })
    document.title = '项目通知'
  },
  methods: {
    nameCheck() {
      if (!this.form.userName) {
        this.$message.error('请输入用户姓名校验')
        return
      }
      noticeUserCheck({ name: this.form.userName }).then(
        (res) => {
          if (res.success) {
            if (res.data !== true) {
              this.$message.success('用户姓名校验成功')
            } else {
              this.form.userName = ''
              this.$message.success('用户姓名校验失败')
            }
            // this.$message.success(res.data)
          } else {
            this.form.userName = ''
            this.$message.error(res.message)
          }
        }
      )
    },
    getCompany() {
      if (!this.form.phone) {
        this.$message.error('请输入联系电话匹配业主单位')
        return
      }
      const find = this.selectOne.find((item) => {
        return (item.phone = this.form.phone)
      })
      if (find) {
        this.form.company = find.company
        if (!this.form.userName) {
          this.form.userName = find.userName
        }
      } else {
        this.$message.error('该手机号无匹配的业主单位')
      }
    },
    getInfo() {
      noticeQueryOne(this.taskPkid).then((res) => {
        if (res.success) {
          this.title = res.data.title
          this.content = res.data.content
          this.fileList = res.data.fileInfos
          this.time = res.data.createTime
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getUserList() {
      noticeUserQuery(this.userParameter).then((res) => {
        if (res.success) {
          this.selectOne = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    downloadFile(data) {
      noticeFileDownload(data.pkid).then((res) => {
        const blob = new Blob([res]) // 把得到的结果用流对象转一下
        const a = document.createElement('a') // 创建一个<a></a>标签
        a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
        a.download = data.sourceName // 设置文件名
        a.style.display = 'none' // 障眼法藏起来a标签
        document.body.appendChild(a) // 将a标签追加到文档对象中
        a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
        a.remove() // 一次性的，用完就删除a标签
      })
    },
    onClose() {
      this.dialogVisible = false
    },
    // 提交
    onSumbit(ruleForm) {
      this.$refs[ruleForm].validate((vaild) => {
        if (vaild) {
          noticeUserRead(this.form)
            .then((res) => {
              if (res.success) {
                this.onClose()
                this.$message.success(res.data)
              } else {
                this.$message.error(
                  res.message || '请求失败'
                )
              }
            })
            .catch(() => {
              this.$message.error('请求失败')
            })
        }
      })
    },
    read() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.back {
  width: 100%;
  height: 100vh;
  background: #f4f8fe;
}
.back ::v-deep {
  .el-input__inner {
    -webkit-user-select: auto;
  }
}
.body {
  width: 100%;
  height: 100vh;
  padding: 10px 10px;
  background: white;
  //background: rgba(25, 47, 61, 0.7);

  .body-header {
    width: 100%;
    height: 5vh;
    text-align: center;
    color: #000;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 500;
  }
  .body-header-time {
    width: 100%;
    height: 3vh;
    text-align: center;
    color: #000;
    font-size: 14px;
    font-family: PingFang SC;
    // font-weight: 500;
  }
  .body-main {
    .body-main-form {
      width: 100%;
      height: 84vh;
      overflow-y: auto;

      .flexBody {
        display: flex;

        .left {
          flex: 1;
          background: #f6f9fb;
        }

        .right {
          flex: 2;
        }
      }

      .row {
        // border-left: 1px solid #CAD4DE;
        // border-top: 1px solid #CAD4DE;
        color: #000;
        font-weight: 500;
        padding: 12px;
        .file {
          color: #00d2ff;
          margin-left: 6px;
          cursor: pointer;
        }
      }

      //
      .rowTwo {
        // border-left: 1px solid #CAD4DE;
        // border-right: 1px solid #CAD4DE;
        // border-bottom: 1px solid #CAD4DE;
        color: #000;
        font-weight: 500;
      }

      .col {
        // border-right: 1px solid #CAD4DE;
        // border-bottom: 1px solid #CAD4DE;
        font-size: 14px;
        padding-left: 5px;
        font-weight: 500;
      }

      .line40 {
        //height: 41px;
        line-height: 40px;
      }

      .line {
        height: 41px;
      }

      .line80 {
        line-height: 122px;
      }
    }
  }
  .body-foot {
    width: 100%;
    height: 7vh;
    // margin-top: 1vh;
    display: flex;

    .body-foot-button {
      margin: 0 auto;
      width: 50vw;
      height: 5vh;
      border-radius: 5px;
      line-height: 5vh;
      background: #00d2ff;
      text-align: center;
      font-size: 16px;
      //color: black;
    }
  }
}

.bodyPC {
  width: 900px;
  height: 100vh;
  padding: 10px 80px;
  background: white;
  //background: rgba(25, 47, 61, 0.7);
  margin: 0 auto;

  .body-header {
    width: 100%;
    height: 7vh;
    text-align: center;
    color: #000;
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 500;
  }
  .body-main {
    .body-main-form {
      width: 100%;
      height: 84vh;
      overflow-y: auto;

      .flexBody {
        display: flex;

        .left {
          flex: 1;
          background: #f6f9fb;
        }

        .right {
          flex: 2;
        }
      }

      .row {
        // border-left: 1px solid #CAD4DE;
        // border-top: 1px solid #CAD4DE;
        color: #000;
        font-weight: 500;
        .file {
          color: #00d2ff;
          margin-left: 6px;
          cursor: pointer;
        }
      }

      //
      .rowTwo {
        // border-left: 1px solid #CAD4DE;
        // border-right: 1px solid #CAD4DE;
        // border-bottom: 1px solid #CAD4DE;
        color: #000;
        font-weight: 500;
      }

      .col {
        // border-right: 1px solid #CAD4DE;
        // border-bottom: 1px solid #CAD4DE;
        font-size: 14px;
        padding-left: 5px;
        font-weight: 500;
      }

      .line40 {
        line-height: 40px;
      }

      .line80 {
        line-height: 122px;
      }
    }
  }
  .body-foot {
    width: 100%;
    height: 7vh;
    // margin-top: 1vh;
    display: flex;

    .body-foot-button {
      margin: 0 auto;
      width: 156px;
      height: 5vh;
      line-height: 5vh;
      background: #00d2ff;
      text-align: center;
      font-size: 16px;
      //color: black;
    }
  }
}

.bodyPC ::v-deep {
  .body-header {
    .el-button {
      float: right;
      background: #089bde !important;
      color: #000;
      width: 70px;
      border: none !important;
    }
  }

  .body-main {
    .el-form {
      .el-form-item__label {
        color: #000;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input__inner {
      background: rgba(92, 106, 116, 0.5);
      width: 100%;
      border: none !important;
      color: #000 !important;
      font-weight: 500;
    }

    &-form {
      .el-input__inner {
        background: rgba(255, 255, 255, 0) !important;
      }

      .textarea_inner {
        border-bottom: 1px solid #cad4de !important;
        padding: 10px 5px;
        background: #f6f9fb;
        color: #000;
        font-weight: 500;
        font-size: 14px;
      }
    }
  }
}

.body ::v-deep {
  .body-header {
    .el-button {
      float: right;
      background: #089bde !important;
      color: white;
      width: 70px;
      border: none !important;
    }
  }

  .body-main {
    .el-form {
      .el-form-item__label {
        color: #000;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input__inner {
      background: rgba(92, 106, 116, 0.5);
      width: 100%;
      border: none !important;
      color: #000 !important;
    }

    &-form {
      .el-input__inner {
        background: rgba(255, 255, 255, 0) !important;
      }

      .textarea_inner {
        border-bottom: 1px solid #cad4de !important;
        background: #f6f9fb;
        color: #000;
      }
    }
  }
  .el-textarea__inner {
    // border: none;
  }
}
</style>
